<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="购物车" class="titleTop">
      <template #right>
        <div>编辑</div>
      </template>
    </van-nav-bar>
    <!-- 购物车 -->
    <van-checkbox-group v-model="selGoods">
      <van-row v-for="(shop, index) in result" :key="shop.id">
        <van-swipe-cell>
          <van-col span="2" class="leftbox">
            <van-checkbox :name="shop" class="checkbox"></van-checkbox>
          </van-col>
          <van-col span="22">
            <van-card
              :thumb="shop.img"
              class="goods-card"
              @click-thumb="detail(shop.id)"
            >
              <template #title>
                <div class="title">{{ shop.title }}</div>
              </template>
              <template #price>
                <div class="price">￥{{ shop.price }}</div>
              </template>
              <template #num>
                <van-stepper v-model="shop.num" />
              </template>
            </van-card>
          </van-col>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              style="height: 100px"
              @click="delShop(index)"
            />
          </template>
        </van-swipe-cell>
      </van-row>
    </van-checkbox-group>
    <!-- 购物车 -->
    <!-- 合计 -->
    <div class="count" v-if="flag">
      <van-row>
        <van-col span="4" offset="1">
          <div class="checkbox">
            <van-checkbox v-model="selAll" @click="checkAll">全选</van-checkbox>
          </div></van-col
        >
        <van-col span="8" offset="4"
          ><div class="allprice">
            合计:
            <span class="red"> ￥{{ total }}</span>
          </div></van-col
        >
        <van-col span="6" offset="1">
          <van-button
            round
            type="info"
            size="normal"
            color="linear-gradient(to right, #ff6034, #ee0a24)"
            >提交订单</van-button
          ></van-col
        >
      </van-row>
    </div>
    <!-- 推荐 -->
    <van-divider><div class="divider">- 猜你喜欢 -</div></van-divider>
    <!-- 商品 -->
    <van-grid :column-num="2">
      <van-grid-item class="grid" v-for="item in showList" :key="item.id">
        <!-- 商品图片 -->
        <template #icon>
          <van-image :src="item.url" height="120px"></van-image>
        </template>
        <!-- 商品文字 -->
        <template #text>
          <div class="text">{{ item.text }}</div>
          <!-- 价格 -->
          <van-cell class="price" :title="item.price" center>
            <!-- 按钮 -->
            <template #right-icon>
              <van-button type="primary" size="mini" color=" #938f8fd0"
                >看相似</van-button
              >
            </template>
          </van-cell>
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 实现底部导航栏 -->
    <Tabbar></Tabbar>
  </div>
</template>
<script>
import Tabbar from "../components/Tabbar.vue";
export default {
  name: "ShopCart",
  components: {
    Tabbar,
  },
  data() {
    return {
      id: this.$route.params.id,
      count: this.$route.params.num,
      selAll: false,
      flag: false,
      selGoods: [], //复选
      total: 0,
      shopList: [],
      logo: "",
      countAdd: 0,
      showList: [
        {
          id: 1,
          url: require("../assets/imgs/商品/充电器.jpg"),
          text: "小米50W二合一充电宝、充电器（1A1C）",
          price: "￥169",
        },
        {
          id: 2,
          url: require("../assets/imgs/8.jpg"),
          text: "Xiaomi 11 Ultra",
          price: "￥3999起",
        },
        {
          id: 3,
          url: require("../assets/imgs/商品/耳机.jpg"),
          text: "Redmi Buds 3 青春版",
          price: "￥99",
        },
        {
          id: 4,
          url: require("../assets/imgs/商品/充电宝.jpg"),
          text: "小米移动电源3 20000mAh USB-C双向...",
          price: "￥109",
        },
        {
          id: 5,
          url: require("../assets/imgs/商品/k40s.jpg"),
          text: "Redmi K40S",
          price: "￥1799",
        },
        {
          id: 6,
          url: require("../assets/imgs/商品/耳机2.jpg"),
          text: "Redmi AirDots 3 真无线蓝牙耳机",
          price: "￥169",
        },
        {
          id: 7,
          url: require("../assets/imgs/商品/徽章.jpg"),
          text: "小米手机纪念徽章",
          price: "￥99",
        },
        {
          id: 8,
          url: require("../assets/imgs/商品/充电器2.jpg"),
          text: "小米GaN充电器 33W",
          price: "￥79",
        },
      ],
    };
  },
  mounted() {
    this.getShopCartById(this.id);
  },
  methods: {
    // 全选
    checkAll() {
      if (this.selAll) {
        this.selGoods = this.shopList;
      } else {
        this.selGoods = [];
      }
    },
    // 删除
    delShop(index) {
      let data = {
        isCart: false,
      };
      this.$dialog
        .confirm({
          message: `您确定要删除${this.shopList[index].title}吗?`,
        })
        .then(() => {
          this.$axios
            .patch("/shops/" + this.shopList[index].id, data)
            .then((res) => {
              if (res.statusText == "OK") {
                this.$toast("删除成功");
                window.location.reload();
              } else {
                console.log("出错了！");
              }
            })
            .catch((err) => {
              console.log(err);
            });
          this.result.splice(index, 1);
        });
    },
    // 详情
    detail(id) {
      this.$router.replace({
        path: "/detail/" + id,
      });
    },
    // 加购
    getShopCartById(id) {
      let _this = this;
      this.$axios
        .get("/shops")
        .then((res) => {
          if (res.statusText == "OK") {
            let a = res.data;
            a.filter((shop) => {
              if (shop.isCart) {
                _this.shopList.push(shop);
                this.flag = true;
              }
            });
          } else {
            console.log("出错了！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    result() {
      let x = this.shopList;
      return x;
    },
  },
  watch: {
    selGoods: {
      handler: function (arr) {
        this.total = 0;
        arr.forEach((shop) => {
          this.total += shop.num * shop.price;
        });
        if (arr.length === this.shopList.length) {
          this.selAll = true;
        } else {
          this.selAll = false;
        }
        if (this.shopList.length === 0) {
          this.flag = false;
        } else {
          this.flag = true;
        }
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
/* 标题栏 */
.titleTop {
  background: #fafafa;
}
/* 标题 */
.title {
  font-size: 16px;
}
/* 推荐 */
.divider {
  font-size: 16px;
  color: #000;
  padding: "0 16px";
}
/* 商品宫格 */
.grid {
  height: 235px;
}
/* 描述 */
.text {
  font-size: 14px;
  height: 40px;
}
/* 推荐价格 */
.price {
  color: #ff6700;
  font-size: 18px;
}
/* 合计 */
.count {
  height: 50px;
}
/* 选择框 */
.checkbox {
  margin-top: 16px;
}
/* 总价 */
.allprice {
  margin-top: 10px;
  font-size: 20px;
  float: right;
}
/* 价格 */
.red {
  color: #ee0a24;
}
</style>